<template>
    <el-card shadow="never">
        <div slot="header">动态表单(slider)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/slider.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '禁用',
                        widget: 'slider',
                        ui: {
                            disabled: true
                        }
                    },
                    num2: {
                        label: '隐藏Tooltip',
                        widget: 'slider',
                        ui: {
                            showTooltip: false
                        }
                    },
                    num3: {
                        label: '格式化',
                        widget: 'slider',
                        ui: {
                            formatTooltip: (val) => {
                                return val / 100
                            }
                        }
                    },
                    num4: {
                        label: '离散值1',
                        widget: 'slider',
                        ui: {
                            step: 10
                        }
                    },
                    num5: {
                        label: '离散值2',
                        widget: 'slider',
                        ui: {
                            step: 10,
                            showStops: true
                        }
                    },
                    num6: {
                        label: '带输入框',
                        widget: 'slider',
                        ui: {
                            showInput: true
                        }
                    },
                    num7: {
                        label: '范围选择',
                        widget: 'slider',
                        ui: {
                            range: true,
                            showStops: true,
                            max: 10
                        }
                    },
                    num8: {
                        label: '最大最小值',
                        widget: 'slider',
                        ui: {
                            min: 55,
                            max: 102
                        }
                    },
                    num9: {
                        label: '标记',
                        widget: 'slider',
                        ui: {
                            range: true,
                            marks: {
                                0: '0°C',
                                8: '8°C',
                                37: '37°C',
                                50: {
                                    style: {
                                    color: '#1989FA'
                                    },
                                    label: this.$createElement('strong', '50%')
                                }
                            }
                        }
                    },
                    num10: {
                        label: '竖向',
                        widget: 'slider',
                        ui: {
                            vertical: true,
                            height: '200px'
                        }
                    }
                },
                ui: {
                    labelWidth: '100px',
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 12
                    }
                }
            },
            formData: {
                num1: 50,
                num7: [4, 7],
                num9: [30, 60]
            }
        }
    },
}
</script>

<style>

</style>